<template>
  <div class="introduce">
    <el-form  ref="form" :model="form" label-width="100px">
      <el-form-item>
        <h3 >企业Logo</h3>
        <el-upload name="file" :action="action" drag :before-upload="beforeUpload" :on-success="onSuccess" accept="image/jpg, image/png, image/jpeg" :show-file-list="false">
          <div :style="'background-image: url('+ logo_url +');height: 100%;background-repeat:no-repeat; background-size:100% 100%;'">
            <i class="el-icon-upload"/>
            <div class="el-upload__text">将logo拖到此处，或<em>点击上传</em></div>
            
          </div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png/将logo拖到此处（png、jpg、jpeg），或文件，且不超过1M</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="融资历程">
        <el-select v-model="companyInfo.financingProcessId" placeholder="请选择融资历程">
          <el-option
            v-for="item in financingprocessData"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="团队规模">
        <el-select v-model="companyInfo.teamSizeId" placeholder="请选择团队规模">
          <el-option
            v-for="item in teamsizeData"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="所属行业">
        <el-select v-model="companyInfo.tradeId" placeholder="请选择所属行业">
          <el-option
            v-for="item in hangyeData"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="福利待遇">
          <div v-for="(welfare, index) in welfareData" :key="index" >
            <el-checkbox style="color: #409EFF;" :indeterminate="indeterminate[index]" v-model="checkAll[index]" @change="handleCheckAllChange(index)">{{welfare.name}}全选</el-checkbox>
            <el-checkbox-group v-model="checkedCities[index]">
              <el-checkbox v-for="(item, indexItem) in welfare.children" :key="indexItem" :label="item.id" @change="handleCheckedCitiesChange(index)">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
      </el-form-item>

      <el-form-item label="公司介绍">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入公司介绍"
          v-model="companyInfo.introduction"
        style="width: 400px">
        </el-input>
      </el-form-item>
      <!-- <el-form-item label="业务描述">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入业务描述"
          v-model="companyInfo.businessDescription"
        style="width: 400px">
        </el-input>
      </el-form-item> -->
      <el-form-item label="公司地址">
        <el-input
          :autosize="{ minRows: 1, maxRows: 1}"
          placeholder="请输入公司详细地址"
          v-model="companyInfo.addressDetail"
          style="width: 400px">
        </el-input>
        <div class="ele-map" style="margin-top: 50px"></div>
      </el-form-item>
      <el-form-item>
        <elMap @locationReport="locationReport" :location="{lng: companyInfo.addressLongltude, lat: companyInfo.addressLatitude}"></elMap>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
  import { getToken } from '@/utils/auth';
  import elMap from '@/components/Map/search'

  export default{
    components: {
      elMap
    },
    computed:{
      header(){
        return{
          'token':this.$store.state.user.token
        }
      },
      logo_url () {
        return  `${this.server_http}web/download/logo/${this.companyInfo.id}?${this.timeStamp}`
      }
    },
    data() {
      return {
        form:null,
        action: window.SERVICE_HTTP + 'web/upload/logo?token=' + getToken(),
        server_http: window.SERVICE_HTTP,
        companyIntroduce: '', // 公司介绍
        companyAddress: '', // 公司地址
        financingprocessData: '', // 融资历程数据
        financingprocessId: '',
        hangyeData: [], // 行业数据
        hangyeId: '',
        teamsizeData: [], // 团队规模数据
        teamsizeId: '',
        welfareData: [], // 福利待遇数组
        checkAll: [], // 全选数组
        checkedCities: [], // 单选数组
        indeterminate: [], // 设置 indeterminate 状态
        timeStamp: new Date().getTime(),
        companyInfo: { // 企业信息
          tradeId: '', // 所属行业
          financingProcessId: '', // 企业当前融资历程类型
          teamSizeId: '', // 团队规模所属ID
          welfareIds: '', // 福利待遇所属IDs(逗号分隔)
          introduction: '', // 企业介绍
          addressDetail: '', // 企业详细地址
          addressLatitude: '', // 地址-纬度
          addressLongltude: '' // 地址-经度
          // businessDescription: '' // 业务描述
        }
      }
    },
    methods: {
      beforeUpload (file) {
        if (file.size > 1024 * 1024) {
          this.$message.error('logo大小超过1m')
          return false
        }
      },
      onSuccess (res) {
        this.timeStamp = new Date().getTime()
        this.$parent.$parent.$children[1].timeStamp = new Date().getTime()
      },
      handleCheckedCitiesChange (index) { // 福利待遇 单选
        let self = this
        self.checkAll[index] = self.checkedCities[index].length === self.welfareData[index].children.length
        self.indeterminate[index] = self.checkedCities[index].length > 0 && self.checkedCities[index].length < self.welfareData[index].children.length
      },
      handleCheckAllChange (index) { // 福利待遇 全选
        let self = this
        let allOr = self.checkedCities[index].length === self.welfareData[index].children.length
        if (allOr) {
          self.checkedCities[index] = []
          self.indeterminate[index] = false
        } else {
          let allData = []
          self.welfareData[index].children.forEach(item => {
            allData.push(item.id)
          })
          self.checkedCities[index] = allData
          self.indeterminate[index] = false
        }
      },
      locationReport (el) { // 位置上报
        this.companyInfo.addressLongltude = el.lng
        this.companyInfo.addressLatitude = el.lat
      },
      submit () { // 提交企业信息
        let self = this
        let welfareIdArr = []
        self.checkedCities.forEach(check => {
          check.forEach(item => {
            welfareIdArr.push(item)
          })
        })
        self.companyInfo.welfareIds = welfareIdArr.join(',')
        if (self.companyInfo.financingProcessId.length === 0) {
          self.$message.error('请选择融资历程')
        } else if (self.companyInfo.teamSizeId.length === 0) {
          self.$message.error('请选择团队规模')
        } else if (self.companyInfo.introduction.length === 0) {
          self.$message.error('请输入企业介绍')
        } else if (self.companyInfo.addressDetail.length === 0) {
          self.$message.error('请输入详细地址')
        } else if (self.companyInfo.addressLongltude.length === 0 || self.companyInfo.addressLatitude.length === 0) {
          self.$message.error('请在地图上标记公司地点')
        } else {
          self.$fetch(self.$api.updateCompanyInfo, self.companyInfo).then(res => {
            if (res.code === 0 && res.msg === 'OK') {
              self.$message.success('企业信息更新成功')
              self.getCompanyInfo()
            } else {
              self.$message.error('企业信息更新失败')
            }
          })
        }
      },
      getCompanyInfo () {
        let self = this
        self.$fetch(self.$api.getCompanyInfo).then(res => { // 获取企业信息
          self.companyInfo = {
            id: res.data.id,
            financingProcessId: res.data.financingProcessId, // 企业当前融资历程类型
            teamSizeId: res.data.teamSizeId, // 团队规模所属ID
            welfareIds: res.data.welfareIds, // 福利待遇所属IDs(逗号分隔)
            introduction: res.data.introduction, // 企业介绍
            addressDetail: res.data.addressDetail, // 企业详细地址
            addressLatitude: res.data.addressLatitude, // 地址-纬度
            addressLongltude: res.data.addressLongltude // 地址-经度
          }
          self.companyInfo = res.data
          let welfareIdArr = res.data.welfareIds.split(',')
          welfareIdArr.forEach(welfareId => {
            self.welfareData.forEach((welfare, index) => {
              welfare.children.forEach((item) => {
                if (welfareId === item.id) {
                  self.checkedCities[index].push(welfareId)
                }
              })
            })    
          })
          self.indeterminate.length = 0
          self.checkAll.length = 0
          self.welfareData.forEach((item, index) => {
            self.indeterminate.push(self.checkedCities[index].length > 0 && self.checkedCities[index].length !== self.welfareData[index].children.length ? true : false)
            self.checkAll.push(self.checkedCities[index].length === self.welfareData[index].children.length)
          })
        })
      }
    },
    created () {
      let self = this
      self.$fetch(self.$api.busfuli).then(res => { // 获取福利待遇
        self.welfareData = res.data
        self.welfareData.forEach(item => {
          self.checkedCities.push([])
        })
        self.getCompanyInfo()
      })
      self.$fetch(self.$api.hangye).then(res => { // 获取行业类别
        self.hangyeData = res.data
      })
      self.$fetch(self.$api.teamsize).then(res => { // 获取团队规模
        self.teamsizeData = res.data
      })
      self.$fetch(self.$api.financingprocess).then(res => { // 获取融资历程
        self.financingprocessData = res.data
      })
    }
  }
</script>

<style lang="scss">
  .introduce {
    .el-upload-dragger {
      width: 250px;
      height: 250px;
    } 
  }
</style>

